<template>
  <div>
    <common-head title="确认订单"></common-head>
    <div class="wrap">
      <div class="contact">
        <van-contact-card
          :type="cardType"
          :name="nowOrder.contact.name"
          :tel="nowOrder.contact.tel"
          @click="clickContact"
        />
      </div>
    </div>
  </div>
</template>

<script>
import CommonHead from 'components/CommonHead'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      cardType: 'add',
      contact: {
        name: '小明',
        tel: 12345678906
      }
    }
  },
  created () {
    this.setContact()
  },
  methods: {
    // 设置当前订单联系人
    setContact () {
      /* 
      判断当前订单中 是有已经有联系人，有联系人的话 啥都不干 edit
      先判断联系人列表中有没有联系人
      如果没有 显示 添加联系人
      联系人列表中如果有默认联系人
      当前订单联系人就是默认联系人
      如果没有 默认就是第一个联系人
      */
     if (this.nowOrder.contact.name) {
       this.cardType = 'edit'
       return;
     }
     if (!this.contacts.length) {
      //  联系人列表为空
        this.cardType = 'add'
        return;
     }
      //  有联系人  
      this.cardType = 'edit'
      // 是否有默认联系人
      let defaultContact = this.contacts.find( contact => contact.isDefault )
      if (defaultContact) {
        // 说明有默认联系人 当前订单联系人就是 默认联系人

        this.setOrderContact(defaultContact)
      } else {
        // 第一个为 当前订单联系人
        this.setOrderContact(this.contacts[0])
      }
    },
    clickContact () {
      if (this.cardType === 'add') {
        // 进入添加联系人
        this.$router.push('/contactAdd')
      } else {
        // 进入联系人列表
        this.$router.push('/contactList')
      }
    },
    ...mapMutations('order', ['setOrderContact'])
  },
  components: {
    CommonHead 
  },
  computed: {
    ...mapState({
      nowOrder: state => state.order.nowOrder, // 当前订单数据
      contacts: state => state.contact.contacts // 所有联系人
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
